<template>
  <panel title="最近24小时车辆进出统计">
    <div class="ml20 mr20">
      <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'lineChart',

  data () {
    return {
      chartWidth: '400px',
      chartHeight: '230px',
      floorDatasDefault: {
      }
    }
  },

  computed: {
    chartOptions () {
      let intoHourNumber = this.$store.getters.lastTwentyFour[1]
      let outHourNumber = this.$store.getters.lastTwentyFour[2]
      let timeData = []
      let nowTime = new Date().getHours()
      for (let i = nowTime + 1, len = 24; i < len; i++) {
        timeData.push(`${i}:00`)
      }
      for (let i = 0, len = nowTime + 1; i < len; i++) {
        timeData.push(`${i}:00`)
      }
      return {
        grid: {
          left: '1%',
          right: '4%',
          bottom: '6%',
          top: '20%',
          containLabel: true
        },
        tooltip: {},
        legend: {
          data: ['入闸', '出闸'],
          textStyle: {
            color: '#fff'
          }
        },
        yAxis: [{
          type: 'value'
          // 没有数据的时候默认显示1
          // min: 'dataMin',
          // max: 'dataMax',
          // interval: 1
        }],
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: timeData
        }],
        series: [
          {
            name: '入闸',
            type: 'line',
            data: intoHourNumber
          },
          {
            name: '出闸',
            type: 'line',
            data: outHourNumber
          }
        ]
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    }
  }
}
</script>
